/**
 * Created by zhr on 2017/6/27.
 */
import React from "react";
import Relay from 'react-relay';
import { Select, message } from 'antd';
import GetQiNiuToken from "../../mutation/FindSewRawListMutation"  //上传图片获取token
import FileUpData from './FileUpDataPro'  //上传附件
import { Button, Modal, Input } from 'fly';
const Option = Select.Option;
import './common.css';
export default class Tab extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            replyVisible: false,
            token: null,
            fileJson:[],
            selectValue: null,
            explainValue: '',
            defaultValue:'请选择批复结果'
        }

        this.handleCancel = this.handleCancel.bind(this);
        this.showModal = this.showModal.bind(this);
        this.selectChange = this.selectChange.bind(this);
        this.explainChange = this.explainChange.bind(this);

        this.fileBeforeload = this.fileBeforeload.bind(this);
        this.addFileItem = this.addFileItem.bind(this); //上传文件 更新内部状态list
    }
    getToken() {
    // 获取上传图片所需的token
        Relay.Store.commitUpdate(
            new GetQiNiuToken({}), {
                onSuccess: (res) => {
                    let errorCode = res.getQiNiuToken.getQiNiuToken.errorCode;
                    if(errorCode==0){
                        let qiniutoken = res.getQiNiuToken.getQiNiuToken.qiniutoken;
                        this.setState({
                            token:qiniutoken
                        })
                    }else if(errorCode==500){
                        message.error("服务器错误，请联系管理员")
                    }
                },
                onFailure:()=>{
                    message.error("网络请求失败 ")
                }
            }
        );
    }
    // 上传文件配置
    fileUploadPlugin = {
        action: 'http://up-z2.qiniu.com',
        beforeUpload:this.fileBeforeload,
        maxlength:10
    };

    //附件上传之前验证...
    fileBeforeload(file){
        const MaxSize = 10;  //最大限度 10M;

        if( file.size / 1024 / 1024 > MaxSize ){
            message.error("文件大小超过限制");
            return false;
        }

        if(file.type == "image/jpeg" ||
            file.type == "image/jpg" ||
            file.type == "image/png" ||
            file.type == "image/gif" ||
            file.type == "image/bmp" ||
            file.name.slice(file.name.lastIndexOf(".")) == ".rar" ||
            file.name.slice(file.name.lastIndexOf(".")) == ".zip" ||
            file.name.slice(file.name.lastIndexOf(".")) == ".xls" ||
            file.name.slice(file.name.lastIndexOf(".")) == ".xlsx" ||
            file.name.slice(file.name.lastIndexOf(".")) == ".doc" ||
            file.name.slice(file.name.lastIndexOf(".")) == ".docx" ||
            file.name.slice(file.name.lastIndexOf(".")) == ".pdf"
        ){}else{
            message.error('文件格式不正确')
            return false;

        }
    }

    // 新增文件函数，（push 当前组件）
    addFileItem(fileList){
        this.state.fileJson = fileList;
        this.setState({
            fileJson:this.state.fileJson,
            fileJsonHint: false
        })
    }
    handleClickSelf(){
        message.warning("附件最多允许上传10个")
    }
    showModal() {
        this.setState({
            replyVisible: true,
        });
    }
    handleOk(e) {
        message.config({
            top: 30
        })
        if (this.state.selectValue == null) {
            message.warn('请选择批复结果')
            return;
        }
        if(this.state.fileJson != '' && this.state.fileJson.length &&  this.state.fileJson[this.state.fileJson.length-1].status !== "done"){
            message.config({
                top: 20,
                duration: 1.5,
            });
            message.info("请等待上传文件完成");
            return ;
        }
        this.props.replyInfo(this.state.selectValue,this.state.fileJson,this.state.explainValue)

    }
    handleCancel(e) {
        this.setState({
            replyVisible: false,
            fileJson:[],
            selectValue: null,
            explainValue: '',
            user:null,
            defaultValue:'请选择批复结果'
        })
    }
    selectChange(value) {
        document.body.style.overflow = 'hidden'
        this.setState({
            selectValue: value,
            defaultValue: value
        })
    }
    explainChange(e) {
        let text = e.target.value;
        if(text.length > 100 ) {
            return;
        }
        this.setState({
            explainValue: text
        })
    }
    render() {
        const {fileJson, token} = this.state
        return (
            <div className="">
                {/*<Button type="primary" onClick={this.showModal}>Open</Button>*/}
                <Modal
                    title="填写批复"
                    visible={this.state.replyVisible}
                    onOk={this.handleOk.bind(this)}
                    onCancel={this.handleCancel}
                >
                    <div className="reply_box">
                        <p>
                            <span><a>*</a>批复结果</span>
                            <Select className="order_creat_select" dropdownClassName='reply_select_fixed' defaultValue={this.state.defaultValue} value={this.state.defaultValue} style={{ width: 180 }} onChange={this.selectChange}>
                                <Option value="1">接受</Option>
                                <Option value="0">拒绝</Option>
                            </Select>
                        </p>
                        <p>
                            <span>&nbsp;附件</span>
                            {/*附件 列表*/}
                            <FileUpData
                                className="packagSteps_updataFile process_demandlook process_delete"
                                filePlugin={this.fileUploadPlugin}
                                fileList={fileJson}
                                callBack={this.addFileItem}
                                token={token}
                                isShowTrigger={fileJson.length < this.fileUploadPlugin.maxlength}
                                handleClickSelf={this.handleClickSelf}
                                getToken={this.getToken.bind(this)}
                            />
                        </p>
                        <p>
                            <span>&nbsp;批复说明</span>
                            <Input value={this.state.explainValue} onChange={this.explainChange} style={{resize:'none',width: 400,minHeight:'28px'}} type="textarea" placeholder="100字以内" />
                        </p>
                    </div>
                </Modal>
            </div>
        )
    }
}